* {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: visible;
}

::-webkit-scrollbar {
    width: 10px;
    background-color: rgb(44, 44, 44);
}

#sec2::-webkit-scrollbar-track,#sec3::-webkit-scrollbar-track, 
#sec4::-webkit-scrollbar-track, #sec5::-webkit-scrollbar-track, #sec6::-webkit-scrollbar-track
#sec7::-webkit-scrollbar-track, #sec8::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(204, 29, 29);
    border-radius: 9px;
}

::-webkit-scrollbar-thumb {
    background: rgb(255, 0, 0);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(231, 46, 13);
}

#medovina {
    width: 25%;
    cursor: none;
}

#medovina2,
#medovina3 {
    width: 25%;
    display: none;
    cursor: none;
}

.cursor {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    z-index: 111;
    border: 1px solid gold;
    transition: all 0.2s ease-out;
}

.red-cursor {
    border: 2px solid rgb(255, 25, 25);
}

.blue-cursor {border: 2px solid rgb(17, 3, 77);}

.expand {
    transform: scale(2.2);
    background: transparent;
    cursor: none;
}

#sec1 {
    background-image: url(greekTemple.png);
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: 100% 100%;
    display: block;
    justify-content: center;
    align-items: center;
    cursor: none;
    overflow: hidden;
}

#sec2 {
    background-image: url(johnathan-taylor-cave-tree.jpg);
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: 100% 100%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: none;
    overflow-x: hidden;
}

#sec3 {
    background-image: url(reka_podsveti.jpg);
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: 100% 100%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: none;
    overflow-x: hidden;
}

#sec4 {
    background-image: url(peakpx.jpg);
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: 100% 100%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: none;
    overflow-x: hidden;
}

#sec5 {
    background-image: url(kvasinky\ \(1\).jpg);
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: 100% 100%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: none;
    overflow-x: hidden;
}

#sec6 {
    background-image: url(fermentation.jpg);
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: 100% 100%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: none;
    overflow-x: hidden;
}

#sec7 {
    background-image: url(zrání.jpg);
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: 100% 100%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: none;
    overflow-x: hidden;
}

#sec8 {
    background-image: url(honey-dripping-with-honey-dipper-isolated-yellow-gold-background_32511-50\ \(1\)\ \(1\).jpg);
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: 100% 100%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: none;
    overflow-x: hidden;
}

h1 {
    color: rgb(255, 217, 0);
    padding: 2%;
    text-align: center;
    font-size: 35px;
    font-family: "Kode Mono", monospace;
    background-color: rgba(0, 0, 0, 0.596);
}

#vcely {color: rgb(255, 255, 188);
position: relative;
top: 33%;
left: 4%;
background-color: rgba(0, 0, 0, 0.527);
width: 26%;
text-align: center;}

#voda {
    color: rgb(255, 255, 188);
    position: relative;
    top: 15%;
    left: 44%;
    background-color: rgba(0, 0, 0, 0.527);
    width: 18.5%;
    text-align: center;
}

#kvasinky {
    color: rgb(255, 25, 25);
    position: relative;
    top: 83%;
    left: 3.5%;
    background-color: rgba(0, 0, 0, 0.76);
    width: 21.2%;
    text-align: center;
}

#kvašení {color: rgb(255, 25, 25);
    position: relative;
    top: 79.2%;
    left: 47.3%;
    background-color: rgba(0, 0, 0, 0.76);
    width: 13.7%;
    text-align: center; }

#zrani {
    color: rgb(255, 255, 188);
    position: relative;
    top: 25%;
    left: 45.3%;
    background-color: rgba(0, 0, 0, 0.76);
    width: 14.7%;
    text-align: center;
}

#nadpis2 {
    opacity: 0;
}

#nadpis4 {color: rgb(255, 25, 25);}

#nadpis5 {
    color: rgb(255, 25, 25);
    background-color: transparent;
    position: relative;
    top: 39.5%;
}

#welcome {
    text-decoration: none;
    position: absolute;
    font-size: 12px;
    font-family: "Old Standard TT";
    left: 23%;
    top: 56.5%;
    transform: rotate(4.5deg);
}

.fade-out {
    animation: fadeOut 1s forwards;
}

.fade-in {
    animation: fadeIn 1s forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.vek {
    display: flex;
    flex-direction: row;
    column-gap: 5%;
    position: absolute;
    left: 32%;
    top: 44.6%;
    transform: rotate(16deg);
}

.number {
    width: 5%;
    height: 15%;
    font-size: 20px;
    text-align: center;
    background-color: transparent;
    color: orangered;
    border: 1px solid orangered;
}

.kontakt {width: 15%;
display: flex;
flex-direction: column;
position: relative;
top: 35%;
left: 42.1%;
border: 3px solid red;
border-radius: 10px;
color: red;
text-align: center;
font-size: 18px;}

@media only screen and (max-width: 768px) {
    .cursor {
        display: none;
    }

    #sec1 {
        height: 100vh;
    }

    #sec2,
    #sec3,
    #sec4,
    #sec5,
    #sec6,
    #sec7,
    #sec8 {
        height: 80vh;
    }

    h1 {
        font-size: 25px;
    }

    #vcely,
    #voda,
    #kvasinky,
    #kvašení,
    #zrani {
        font-size: 12px;
    }

    #vcely {left: 1%;
    top: 28%;}

    #voda {top: 12%;
    left: 42%;}

    .vek {
        left: 20%;
        top: 46%;
        transform: rotate(50deg);
    }

    .number {
        font-size: 12px;
    }

    .kontakt {
        width: 75%;
        left: 10%;
        top: 37.7%;
        font-size: 12px;
    }

        #medovina, #medovina2,
        #medovina3 {width: 10%;}
}